<template>
  <div
  >
    <el-upload
      v-if="!disabled"

      :before-upload="beforeUpload"
      :drag="dragFlag"
      :file-list="fileList"
      :show-file-list="false"
      :multiple="false"
      :http-request="handleUploadSuccess"
      :accept="acceptTypeStr"
      action="#"
      class="upload-demo"
    >
      <div >
        <div v-if="dragFlag">

          <i class="el-icon-upload"/>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </div>

        <div v-else>
          <span style="color:red"><i class="el-icon-plus"/>{{ fileList.length==0?'新增':'修改' }}</span>

        </div>

        <!-- <div class="divB">
          <el-button @click="dialogVisible4PreviewImg= true;dialogImageUrl4PreviewImg = fileList[0].file_url">预览</el-button>
        </div> -->
      </div>

      <!-- <div v-else>
       <i class="el-icon-plus avatar-uploader-icon "/>
      </div> -->

    </el-upload>
    <img
      v-if="fileList.length>0 && fileList[0]&& (fileList[0].file_url)"
      :src="fileList[0].file_url"
      style=" width: 50px; margin: 0 auto"
      @click="dialogVisible4PreviewImg= true;dialogImageUrl4PreviewImg = fileList[0].file_url"
    >
    <el-dialog
      :visible.sync="dialogVisible4PreviewImg"
      title="预览"
      width="800"
      append-to-body
    >
      <img
        :src="dialogImageUrl4PreviewImg"
        style="display: block; max-width: 100%; margin: 0 auto"
      >
    </el-dialog>
  </div>
</template>

<script>
import { uploadFile } from '@/api/upload.js'

import rSelect from '@/components/Select/Select'
import BaseTable from '@/components/BaseTable'
import formMixins from '@/mixins/formMixins'
import Radio from '@/components/Radio/Radio'
export default {
  components: {
    rSelect,
    BaseTable,
    Radio
  },
  mixins: [formMixins],
  props: {
    dragFlag: {
      type: Boolean,
      default: false
    },
    disabled: Boolean,
    fileList: Array,
    maxSize: {
      type: Number,
      default: 10 // mb
    },
    acceptTypeStr: {
      type: String,
      default: '.jpg,.png'
    }
  },
  data() {
    return {
      uidBase64Map: new Map(), // file uid =>base64url

      dialogVisible4PreviewImg: false,
      dialogImageUrl4PreviewImg: '',
      reader: new FileReader()

    }
  },
  computed: {
  },
  // 初始化
  mounted() {
  },
  methods: {

    beforeUpload(file) {
      if (this.acceptTypeStr != null && this.acceptTypeStr !== '' && this.acceptTypeStr !== undefined && this.acceptTypeStr.indexOf(file.name.substring(file.name.lastIndexOf('.'), file.name.length)) < 0) {
        this.$message({
          type: 'error',
          message: `文件后缀需要为：${this.acceptTypeStr}`
        })
        return false
      }
      if (this.maxSize != null && this.maxSize !== '' && this.maxSize !== undefined && file.size / 1024 / 1024 > parseInt(this.maxSize)) {
        this.$message({
          type: 'error',
          message: '上传文件大小需小于' + this.maxSize + 'MB!'
        })
        return false
      }
    },
    handleUploadSuccess(param) {
      // this.imgFile = []
      const that = this
      // console.log('param is ', param)
      const formData = new FormData()
      formData.append('file', param.file)

      uploadFile(formData).then((res) => {
        const tempObj = {}
        tempObj.dtl_seq = 1
        tempObj.file_url = res.file_id
        tempObj.file_upload_info_id = res.file_upload_info_id
        tempObj.name = res.name
        // param.dtl_seq = 1
        // param.file_url = res.file_id
        // param.file_upload_info_id = res.file_upload_info_id
        // param.name = res.name
        // param.file = null // 移除文件
        if (that.fileList.length > 0) {
          that.fileList.splice(0, 1, tempObj)
        } else {
          that.fileList.push(tempObj)
        }
      })

      // console.log('this.fileList is', this.fileList)
      // param.dtl_seq = 1

      // this.reader.readAsDataURL(param.file)
      // const that = this
      // // 读取完成后触发
      // this.reader.onload = function() {
      //   that.uidBase64Map.set(param.file.uid, this.result)
      //   that.$set(param, 'fileReadReady', true)
      // }
      // // this.fileList4Show.push(param)
      // if (this.fileList.length > 0) {
      //   // this.fileList[0] = param
      //   this.fileList.splice(0, 1, param)
      // } else {
      //   this.fileList.push(param)
      // }
      // this.$emit('update:fileInfo', param)
      // console.log(this.fileList)
    }
  }
}
</script>

<style scoped>

  .divB{
    margin-top: 6px;
    text-align: center;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
</style>
